<template>
    <div class="settings-container fade-in">
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <h2 class="page-title">
                        <el-icon class="title-icon">
                            <Setting />
                        </el-icon>
                        系统设置
                    </h2>
                    <p class="page-subtitle">管理系统配置和参数设置</p>
                </div>
            </div>
        </div>

        <div class="settings-content">
            <el-row :gutter="24">
                <el-col :xs="24" :lg="16">
                    <!-- 比赛项目设置 -->
                    <el-card class="settings-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><Trophy /></el-icon>
                                    <span class="header-title">比赛项目设置</span>
                                </div>
                                <el-button type="primary" @click="showAddCompetitionDialog = true">
                                    <el-icon><Plus /></el-icon>
                                    添加项目
                                </el-button>
                            </div>
                        </template>

                        <el-table :data="competitions" style="width: 100%" class="settings-table">
                            <el-table-column prop="name" label="项目名称" min-width="150">
                                <template #default="{ row }">
                                    <div class="competition-name">
                                        <el-icon class="competition-icon"><Trophy /></el-icon>
                                        <span>{{ row.name }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fee" label="报名费" min-width="120">
                                <template #default="{ row }">
                                    <span class="fee-amount">¥{{ row.fee.toFixed(2) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="状态" min-width="100">
                                <template #default="{ row }">
                                    <el-tag :type="row.status === '启用' ? 'success' : 'info'" effect="light">
                                        {{ row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200" fixed="right">
                                <template #default="{ row }">
                                    <div class="action-buttons">
                                        <el-button type="primary" size="small" @click="editCompetitionHandler(row)" class="action-btn">
                                            <el-icon><Edit /></el-icon>
                                            编辑
                                        </el-button>
                                        <el-button type="danger" size="small" @click="deleteCompetition(row)" class="action-btn">
                                            <el-icon><Delete /></el-icon>
                                            删除
                                        </el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <!-- 系统参数设置 -->
                    <el-card class="settings-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><Tools /></el-icon>
                                    <span class="header-title">系统参数设置</span>
                                </div>
                            </div>
                        </template>

                        <el-form :model="systemSettings" label-width="120px" class="settings-form">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="系统名称">
                                        <el-input v-model="systemSettings.systemName" placeholder="请输入系统名称" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="管理员邮箱">
                                        <el-input v-model="systemSettings.adminEmail" placeholder="请输入管理员邮箱" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="数据备份">
                                        <el-switch v-model="systemSettings.autoBackup" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="邮件通知">
                                        <el-switch v-model="systemSettings.emailNotification" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="系统描述">
                                <el-input 
                                    v-model="systemSettings.description" 
                                    type="textarea" 
                                    :rows="3"
                                    placeholder="请输入系统描述" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveSystemSettings">
                                    <el-icon><Check /></el-icon>
                                    保存设置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>

                <el-col :xs="24" :lg="8">
                    <!-- 快捷操作 -->
                    <el-card class="settings-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><Operation /></el-icon>
                                    <span class="header-title">快捷操作</span>
                                </div>
                            </div>
                        </template>

                        <div class="quick-actions">
                            <div class="action-item" @click="exportData">
                                <div class="action-icon export">
                                    <el-icon><Download /></el-icon>
                                </div>
                                <div class="action-info">
                                    <div class="action-title">导出数据</div>
                                    <div class="action-desc">导出所有报名记录</div>
                                </div>
                            </div>
                            <div class="action-item" @click="backupData">
                                <div class="action-icon backup">
                                    <el-icon><Upload /></el-icon>
                                </div>
                                <div class="action-info">
                                    <div class="action-title">数据备份</div>
                                    <div class="action-desc">创建系统备份</div>
                                </div>
                            </div>
                            <div class="action-item" @click="clearCache">
                                <div class="action-icon cache">
                                    <el-icon><Refresh /></el-icon>
                                </div>
                                <div class="action-info">
                                    <div class="action-title">清除缓存</div>
                                    <div class="action-desc">清理系统缓存</div>
                                </div>
                            </div>
                            <div class="action-item" @click="resetSettings">
                                <div class="action-icon reset">
                                    <el-icon><RefreshRight /></el-icon>
                                </div>
                                <div class="action-info">
                                    <div class="action-title">重置设置</div>
                                    <div class="action-desc">恢复默认设置</div>
                                </div>
                            </div>
                        </div>
                    </el-card>

                    <!-- 系统信息 -->
                    <el-card class="settings-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><InfoFilled /></el-icon>
                                    <span class="header-title">系统信息</span>
                                </div>
                            </div>
                        </template>

                        <div class="system-info">
                            <div class="info-item">
                                <span class="info-label">版本号</span>
                                <span class="info-value">{{ systemInfo.version }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">构建时间</span>
                                <span class="info-value">{{ systemInfo.buildTime }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">运行时间</span>
                                <span class="info-value">{{ systemInfo.uptime }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">数据库</span>
                                <span class="info-value">{{ systemInfo.database }}</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 添加比赛项目对话框 -->
        <el-dialog 
            v-model="showAddCompetitionDialog" 
            title="添加比赛项目" 
            width="500px" 
            class="add-dialog">
            <el-form :model="newCompetition" :rules="competitionRules" ref="competitionFormRef" label-width="100px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="newCompetition.name" placeholder="请输入项目名称" />
                </el-form-item>
                <el-form-item label="报名费" prop="fee">
                    <el-input-number 
                        v-model="newCompetition.fee" 
                        :min="0" 
                        :precision="2"
                        :step="10"
                        placeholder="请输入报名费"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="newCompetition.status" style="width: 100%">
                        <el-option label="启用" value="启用" />
                        <el-option label="禁用" value="禁用" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input 
                        v-model="newCompetition.description" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入项目描述（可选）" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showAddCompetitionDialog = false">取消</el-button>
                    <el-button type="primary" @click="addCompetition">确定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑比赛项目对话框 -->
        <el-dialog 
            v-model="showEditCompetitionDialog" 
            title="编辑比赛项目" 
            width="500px" 
            class="edit-dialog">
            <el-form :model="editCompetition" :rules="competitionRules" ref="editCompetitionFormRef" label-width="100px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model="editCompetition.name" placeholder="请输入项目名称" />
                </el-form-item>
                <el-form-item label="报名费" prop="fee">
                    <el-input-number 
                        v-model="editCompetition.fee" 
                        :min="0" 
                        :precision="2"
                        :step="10"
                        placeholder="请输入报名费"
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="editCompetition.status" style="width: 100%">
                        <el-option label="启用" value="启用" />
                        <el-option label="禁用" value="禁用" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input 
                        v-model="editCompetition.description" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入项目描述（可选）" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showEditCompetitionDialog = false">取消</el-button>
                    <el-button type="primary" @click="updateCompetition">保存修改</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
    Setting, Trophy, Plus, Edit, Delete, Tools, Check, Operation, 
    Download, Upload, Refresh, RefreshRight, InfoFilled 
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const competitions = ref([
    {
        id: 1,
        name: '100米跑',
        fee: 100,
        status: '启用',
        description: '短跑项目'
    },
    {
        id: 2,
        name: '跳远',
        fee: 80,
        status: '启用',
        description: '田赛项目'
    },
    {
        id: 3,
        name: '游泳',
        fee: 120,
        status: '启用',
        description: '水上项目'
    }
])

const systemSettings = reactive({
    systemName: '比赛报名费用管理系统',
    adminEmail: 'admin@example.com',
    autoBackup: true,
    emailNotification: false,
    description: '专业的比赛报名费用管理系统，提供高效的数据管理和统计分析功能。'
})

const systemInfo = reactive({
    version: 'v1.0.0',
    buildTime: '2024-01-15',
    uptime: '15天 8小时 32分钟',
    database: 'SQLite 3.35.0'
})

const showAddCompetitionDialog = ref(false)
const showEditCompetitionDialog = ref(false)
const competitionFormRef = ref(null)
const editCompetitionFormRef = ref(null)
const newCompetition = ref({
    name: '',
    fee: 0,
    status: '启用',
    description: ''
})

const editCompetition = ref({
    id: null,
    name: '',
    fee: 0,
    status: '启用',
    description: ''
})

const competitionRules = {
    name: [
        { required: true, message: '请输入项目名称', trigger: 'blur' }
    ],
    fee: [
        { required: true, message: '请输入报名费', trigger: 'blur' },
        { type: 'number', min: 0, message: '报名费不能为负数', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请选择状态', trigger: 'change' }
    ]
}

const addCompetition = async () => {
    if (!competitionFormRef.value) return
    
    try {
        await competitionFormRef.value.validate()
        
        const competition = {
            id: Date.now(),
            ...newCompetition.value
        }
        competitions.value.push(competition)
        showAddCompetitionDialog.value = false
        ElMessage.success('添加成功')
        
        // 重置表单
        newCompetition.value = {
            name: '',
            fee: 0,
            status: '启用',
            description: ''
        }
    } catch (error) {
        ElMessage.error('请填写正确的信息')
    }
}

const editCompetitionHandler = (row) => {
    // 复制数据到编辑表单
    editCompetition.value = {
        id: row.id,
        name: row.name,
        fee: row.fee,
        status: row.status,
        description: row.description || ''
    }
    showEditCompetitionDialog.value = true
}

const updateCompetition = async () => {
    if (!editCompetitionFormRef.value) return
    
    try {
        await editCompetitionFormRef.value.validate()
        
        const index = competitions.value.findIndex(item => item.id === editCompetition.value.id)
        if (index !== -1) {
            competitions.value[index] = { ...editCompetition.value }
            showEditCompetitionDialog.value = false
            ElMessage.success('修改成功')
            
            // 重置编辑表单
            editCompetition.value = {
                id: null,
                name: '',
                fee: 0,
                status: '启用',
                description: ''
            }
        }
    } catch (error) {
        ElMessage.error('请填写正确的信息')
    }
}

const deleteCompetition = (row) => {
    ElMessageBox.confirm(
        `确定要删除项目"${row.name}"吗？`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        const index = competitions.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
            competitions.value.splice(index, 1)
            ElMessage.success('删除成功')
        }
    })
}

const saveSystemSettings = () => {
    ElMessage.success('设置保存成功')
}

const exportData = () => {
    ElMessage.success('数据导出功能开发中...')
}

const backupData = () => {
    ElMessage.success('数据备份功能开发中...')
}

const clearCache = () => {
    ElMessage.success('缓存清理完成')
}

const resetSettings = () => {
    ElMessageBox.confirm(
        '确定要重置所有设置吗？此操作不可恢复。',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        ElMessage.success('设置已重置')
    })
}
</script>

<style scoped>
.settings-container {
    animation: fadeIn 0.5s ease-out;
}

.page-header {
    margin-bottom: var(--spacing-xl);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.title-section {
    flex: 1;
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.title-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.settings-content {
    margin-bottom: var(--spacing-xl);
}

.settings-card {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    transition: all 0.3s ease;
}

.settings-card:hover {
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-icon {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.header-title {
    font-weight: 600;
    color: var(--text-primary);
}

.settings-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.competition-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.competition-icon {
    color: var(--primary-color);
    font-size: 1rem;
}

.fee-amount {
    font-weight: 600;
    color: var(--danger-color);
}

.action-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.settings-form {
    padding: var(--spacing-lg) 0;
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.action-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.action-item:hover {
    background: var(--background-light);
    transform: translateX(4px);
    border-color: var(--primary-color);
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.action-icon.export {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.action-icon.backup {
    background: linear-gradient(135deg, var(--info-color), #60a5fa);
}

.action-icon.cache {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.action-icon.reset {
    background: linear-gradient(135deg, var(--danger-color), #f87171);
}

.action-info {
    flex: 1;
}

.action-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.action-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.system-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.info-value {
    font-weight: 600;
    color: var(--text-primary);
}

.add-dialog {
    border-radius: var(--radius-xl);
}

.edit-dialog {
    border-radius: var(--radius-xl);
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .settings-form {
        padding: var(--spacing-md) 0;
    }
    
    .action-item {
        padding: var(--spacing-sm);
    }
    
    .action-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.25rem;
    }
    
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
}
</style>